import { Button, Space, Card, Statistic, Tag } from 'antd'
import { useState } from 'react'

const { Countdown } = Statistic
const deadline = Date.now() + 1000 * 60 * 60 * 2  // Moment is also OK

const AnswerSheet = ({
  test,
}) => {
  const [tag, setTag] = useState({
    tagText: '考试剩余时间',
    tagColor: 'blue'
  }
  )

  //后面记得换成根据id获取试卷
  const onFinish = () => {
    console.log('finished!')
  }
  const onChange = (val) => {
    if (4.95 * 1000 < val && val < 15 * 1000 * 60) {
      // console.log('changed!')
      setTag({
        tagText: '距离考试结束仅剩',
        tagColor: 'red'
      })
    }
  }
  return (
    <div className='answer-sheet-left'>
      <div className='answer-sheet-infor-test'>
        <h1>{test.name}</h1>
        <div className='header-session'>
          <span className='header-small'>考试时间:{test.test_time}(分钟)</span>
          <span className='header-small'>考试科目:{test.subject_name}</span>
          <span className='header-small'>考试总分:{test.total_score}分</span>
        </div>
      </div>
      <div className='answer-sheet-infor-time'>
        <Tag color={tag.tagColor}>{tag.tagText}:</Tag>
        <div className='countdown'>
          <Countdown value={deadline} onFinish={onFinish} onChange={onChange} />
        </div>
      </div>
    </div>
  )
}

export default AnswerSheet